<template>
  <div class="noteDetail" v-if="note">
      <van-nav-bar  left-arrow 
        @click-left="onClickLeft" 
        @click-right="onClickRight"
        :fixed="true"
        right-text="搜索"
        :border="false"
        z-index="100"
        :placeholder="true"
        >
        <template #left>
            <van-icon name="arrow-left" size="20"/>
        </template>
        <template #title>
            <div class="top">
                <van-image
                    width="35"
                    height="35"
                    :src="note.author.p || note.author.user_photo"
                    :round="true"
                />
                <div class="right">
                    <p>
                        <span>{{note.author.n}}</span>
                        <span v-if="note.author.lvl" class="lv">LV.{{note.author.lvl}}</span>
                    </p>
                    <p class="daka">{{note.straight_text}}</p>
                </div>
            </div>
        </template>
        <template #right>
                <div class="guanzhu">关注</div>
                <van-icon name="ellipsis" size="25"/>
        </template>
     </van-nav-bar>
     <div >
        <div v-if="note.video_url" style="background: rgb(41, 41, 43)">
            <video :src="note.video_url" controls autoplay style="max-height: 70vh; vertical-align: bottom;" width="100%"></video>
        </div>
        <van-swipe  v-else :loop="false" initial-swipe="0" @change="onChange1">
            <template #indicator>
                <div class="custom-indicator">{{ current + 1 }}/{{images.length}}</div>
            </template>
            <van-swipe-item v-for="(image,index) in note.images" :key="index">
                <van-image
                    :src="image.u"
                    @load="onLoad"
                    style="max-height: 70vh"
                    @click="show=true"
                >
                   <!--  <template v-slot:loading>
                        <van-loading type="spinner" size="20" />
                    </template> -->
                </van-image>
                <!-- <img v-lazy="image.u" @load="onLoad"/> -->
            </van-swipe-item>
        </van-swipe>
        <div class="text">
            <div v-if="note.title">
                <p>{{note.title}}</p>
                <p style="margin-top:10px;font-weight: normal;font-size: 15px" v-if="note.contents[0]">{{note.contents[0].c}}</p>
            </div>
            <div v-html="text"  v-else></div>
        </div>
        <div class="date">
            <div class="left" v-if="note.publishtime">
                {{note.publishtime.split(" ")[0]}}
            </div>
            <div class="right">
                <span v-if="note.favo_count">{{note.favo_count}}次收藏</span>
                <span v-if="note.like_count">{{note.like_count}}次赞</span>
            </div>
        </div>
     </div>

    <van-image-preview v-model="show" :images="images" @change="onChange" :loop	="false" closeable close-icon-position="top-left" :close-icon="require('../assets/images/return.png')">
        <template v-slot:index>{{ index+1 }}/{{images.length}}</template>
    </van-image-preview>

    <div class="com" v-if="comments">
         <p>
             <span class="hot_com">笔记评论</span>
         </p>
         <Comment 
            v-for="(comment,index) in comments" 
            :key="index"
            :author="comment.u.id"
            :comment="comment"
        />
     </div>

    <!-- 相关笔记 -->
    <p class="relate" v-if="relate.length">相关笔记</p>
    <WaterFull :lists="relate"/>
  </div>
</template>

<script>
import _ from "lodash"
import loading from "../assets/images/loading.gif"
import WaterFull from  "@/components/WaterFull.vue"
import { getNoteDetail,getRelateNote } from "@/apis/index";
import Comment from "@/components/Comment.vue"
export default {
    name:"NoteDetail",
    components:{
        WaterFull,
        Comment,
    },
    data: function() {
        return{
            note: null,
            text: null,
            time: 0,
            show: false,
            index: 0,
            images: null,
            relate: [],
            show1: false,
            contents: null,
            comments: null,
            current: 0,
        }
    },
    created: async function () {
            this.toToast();
            this.note = (await getNoteDetail(this.$route.query.id)).data.result.note;
            /* getNoteDetail(this.$route.query.id).then( res => {
                this.note = res.data.result.note;
            }) */
            this.comments = this.note.cs;
            this.images = this.note.images.map(item => item.u );

            if(this.note.video_url){
                this.$toast.clear();
            }
            if(this.note.contents[0]){
                this.text = this.note.contents[0].c.replaceAll("\n","<br/>");
                this.text = this.text.replaceAll(" ","&nbsp;");
                this.text = `<p>${this.text}`;
                this.text = this.text.replace("<br/>", "</p><br/>")
            }
            this.relate = (await getRelateNote(this.$route.query.id, 0)).data.result.list;
        },
    methods:{
        onChange(index) {
            this.index = index;
        },
        onChange1(index){
             this.current = index;
        },
        onClickLeft(){
            this.$router.go(-1)
        },
        onClickRight(){
            console.log(2);
        },
        onLoading(){
            this.$toast.clear();
        },
        onLoad:  _.debounce(function(){
            this.time++;
            if(this.time == 1){
                this.onLoading();
            }
        }, 500),
        toToast: function(){
            this.$toast({
                icon: loading,
                duration: 10000,
                overlay: true,
            });
        },
    },
    watch:{
        '$route'(){
            this.$router.go(0);
        }
    }
}
</script>

<style lang="less" >
.custom-indicator {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 5px 10px;
    border-radius: 25px;
    font-size: 12px;
    color: white;
    background: rgba(0, 0, 0, 0.4);
  }
.noteDetail{
    .com{
        margin-top: 25px;
        .hot_com{
            font-weight: 600;
            margin-left: 15px;
        }
    }
    .relate{
        margin-top: 25px;
        margin-left: 15px;
        font-weight: 600;
        font-size: 18px;
    }
    .van-image-preview{
        .van-image-preview__swipe{
            background-color: black;
        }
        /* .van-image-preview__cover{
            color: white;
            top: 100%;
            transform: translateY(-100%);
            .image_text{
                line-height: 25px;
                padding: 0 15px;
                margin-bottom: 40px;
            }
        } */
    }
    .date{
        margin-top: 10px;
        padding: 0 15px;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        color: gray;
        .right{
            span{
                &:first-child{
                    margin-right: 10px;
                }
            }
        }
    }
    .text{
        font-size: 15px;
        padding: 20px 15px 0 15px;
        p{
            font-size: 16px;
            font-weight: 600;
        }
    }
    .van-swipe{
        background: #f5f2f285;
        .van-swipe__track{
            display: flex;
            align-items: center;
        }
        .van-swipe__indicators{
            display: none;
        }
        .van-swipe-item{
            min-height: 150px;
            .van-image{
                .van-image__error{
                    i{
                        display: none;
                    }
                }
            }
        }
    }
    .van-nav-bar{
           background: white;
           .van-nav-bar__content{
               height:70px;
               .van-icon,.van-nav-bar__text{
                   color: black;
               }
               .van-nav-bar__title{
                   width: auto;
                   margin-left: 50px;
               }
           }
           .guanzhu{
                width: 70px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                background-color: orange;
                border-radius: 25px;
                font-size: 12px;
                font-weight: 550;
                margin-right: 15px;
            }
            .top{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .right{
                    font-size: 14px;
                    text-align: left;
                    margin-left: 5px;
                    .daka{
                        color: #999999;
                    }
                    p{
                        line-height: 20px;
                        .lv{
                            color: orange;
                            margin-left: 5px;
                        }
                    }
                }
            }
       }
       .navBar{
           background:rgb(255, 255, 255) ;
           border-bottom: 1px solid rgba(252, 248, 248, 0.699);
           .van-nav-bar__content{
               .van-icon,.van-nav-bar__text{
                   color: black;
               }
           }
       }
}
</style>